<template>
  <view class="flex-col page">
    <view class="flex-col section_1">
      <view class="justify-center group">
        <view class="flex-row group_1">
          <image
		  :src="imgUrl+'16557836589880369079.png'"
          
            class="image"
          />
          <image
		   :src="imgUrl+'16557836589928919758.png'"
           
            class="image_1"
          />
        </view>
        <text class="text">9:41 AM</text>
        <view class="flex-row group_2">
          <image
		   :src="imgUrl+'16557836588639659851.png'"
           
            class="image_2"
          />
          <text class="text_1">100%</text>
          <image
            :src="imgUrl+'16557852693903623672.png'"
            class="image_3"
          />
        </view>
      </view>
      <view class="flex-col group_3">
        <view class="justify-center group_4">
          <image
		  :src="imgUrl+'16557836621783633159.png'"
           
            class="image_4"
          />
          <text class="text_2">订单详情</text>
        </view>
        <view class="justify-between group_5">
          <view class="flex-col items-center ">
            <text class="text_3">补价订单待付款</text>
            <text class="text_4">剩余时间：23:59:59</text>
          </view>
          <image
            :src="imgUrl+'16557852713734058034.png'"
            class="image_5"
          />
        </view>
      </view>
    </view>
    <view class="flex-col group_7">
      <view class="flex-col section_2">
        <view class="flex-row">
          <view class="section_3"><!--*--></view>
          <text class="text_5">全流程咨询订单</text>
        </view>
        <view class="justify-between group_9">
          <text class="text_6">你的房屋位置</text>
          <text class="text_7">河南省郑州市金水区</text>
        </view>
        <view class="justify-between group_10">
          <text class="text_8">你的房屋面积</text>
          <text class="text_9">120m²</text>
        </view>
        <view class="justify-between group_11">
          <text class="text_10">房屋类型</text>
          <text class="text_11">三居室</text>
        </view>
      </view>
      <view class="flex-col section_4">
        <view class="flex-row">
          <view class="section_3"><!--*--></view>
          <text class="text_12">补差价订单</text>
        </view>
        <text class="text_13">补价原因：真实面积与订单提供面积不符。</text>
        <view class="group_13">
          <text class="text_14">补价金额：</text>
          <text class="text_15">¥19.00</text>
        </view>
      </view>
      <view class="flex-col section_5">
        <view class="flex-col">
          <view class="flex-row group_15">
            <view class="section_3"><!--*--></view>
            <text class="text_16">全流程咨询</text>
          </view>
          <view class="flex-row group_16">
            <text class="text_17">高级设计</text>
            <image
			 :src="imgUrl+'16557826926394646541.png'"
             
              class="image_6 image_7"
            />
          </view>
          <text class="text_18">(含每个软装细节）</text>
        </view>
        <view class="flex-col group_17">
          <view class="flex-row">
            <text class="text_19">预算合约审核</text>
            <image
			:src="imgUrl+'16557826926394646541.png'"
            
              class="image_6 image_8"
            />
          </view>
          <text class="text_20">(含每个软装细节）</text>
        </view>
        <view class="flex-row group_19">
          <text class="text_21">主材100条询价（未完善）</text>
          <image
		  :src="imgUrl+'16557826926394646541.png'"
           
            class="image_6 image_9"
          />
        </view>
        <view class="flex-row group_20">
          <text class="text_22">8小时线下咨询</text>
          <image
		  :src="imgUrl+'16557826926394646541.png'"
           
            class="image_6 image_10"
          />
        </view>
        <view class="flex-col group_21">
          <view class="flex-row">
            <text class="text_23">施工巡检高级服务</text>
            <image
			:src="imgUrl+'16557826926394646541.png'"
              
              class="image_6 image_11"
            />
          </view>
          <text class="text_24">（21次巡检含进度监控）</text>
        </view>
        <view class="flex-col group_23">
          <view class="justify-between group_24">
            <text class="text_25">总额</text>
            <text class="text_26">￥155</text>
          </view>
          <view class="justify-end group_25">
            <text class="text_27">应付款:</text>
            <view class="group_26">
              <text class="text_28">￥</text>
              <text class="text_29">145</text>
            </view>
          </view>
        </view>
      </view>
      <view class="flex-col section_6">
        <view class="flex-row group_27">
          <view class="section_3 view_3"><!--*--></view>
          <image
		  :src="imgUrl+'16557836621826750433.png'"
           
            class="image_12"
          />
        </view>
        <view class="flex-col group_28">
          <view class="flex-row">
            <text class="text_30">订单编号</text>
            <text class="text_31">2018101902315</text>
          </view>
          <text class="text_32">复制</text>
          <view class="flex-row group_30">
            <text class="text_33">下单时间</text>
            <text class="text_34">2020-09-28 21:12:12</text>
          </view>
        </view>
      </view>
    </view>
    <view class="justify-end section_7">
      <view class="flex-col items-center text-wrapper"><text class="text_35">取消订单</text></view>
      <view class="flex-col items-center image-wrapper">
        <image
		:src="imgUrl+'16557836652872470084.png'"
        
          class="image_13"
        />
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
		  imgUrl:this.$IMG_URL,
	  };
    },
    methods: {},
  };
</script>

<style scoped lang="scss">
  .section_3 {
    margin-top: 12rpx;
    background-color: #1d6aff;
    border-radius: 3rpx;
    width: 6rpx;
    height: 28rpx;
  }
  .image_6 {
    width: 28rpx;
    height: 28rpx;
  }
  .page {
    background-color: #f6f7f9ff;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .section_1 {
    padding: 5rpx 0 145.5rpx;
    background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836621628592893.png');
    background-position: 0% 0%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .group_7 {
    margin-top: -109rpx;
    padding: 0 24rpx 32rpx;
    position: relative;
  }
  .section_7 {
    padding: 18rpx 24rpx;
    background-color: #ffffff;
    box-shadow: 0px -1rpx 0px 0px #eeeeee;
  }
  .group {
    padding: 0 14rpx;
    position: relative;
  }
  .group_3 {
    margin-top: 22rpx;
    padding: 0 24rpx;
  }
  .section_2 {
    padding: 30rpx 22rpx 40rpx 24rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
  }
  .section_4 {
    margin-top: 14rpx;
    padding: 36rpx 24rpx 35rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
  }
  .section_5 {
    margin-top: 20rpx;
    padding: 29rpx 22rpx 0 24rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
  }
  .section_6 {
    margin-top: 20rpx;
    padding: 0 24rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
  }
  .text-wrapper {
    margin-right: 24rpx;
    padding: 14rpx 0 22rpx;
    background-color: #f6f7f9;
    border-radius: 32rpx;
    width: 172rpx;
    height: 64rpx;
  }
  .image-wrapper {
    padding: 12rpx 0 22rpx;
    background-color: #1d6aff;
    border-radius: 32rpx;
    width: 172rpx;
    height: 64rpx;
  }
  .group_1 {
    position: absolute;
    left: 14rpx;
    top: 50%;
    transform: translateY(-50%);
  }
  .text {
    color: #ffffff;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .group_2 {
    position: absolute;
    right: 16.5rpx;
    top: 50%;
    transform: translateY(-50%);
  }
  .group_4 {
    padding: 0 8rpx 4rpx;
    position: relative;
  }
  .group_5 {
    margin-top: 43rpx;
  }
  .group_9 {
    margin-top: 38rpx;
  }
  .group_10 {
    margin-top: 31rpx;
  }
  .group_11 {
    margin-top: 25rpx;
  }
  .text_13 {
    margin-top: 38rpx;
    align-self: flex-start;
    color: #666666;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .group_13 {
    margin-top: 37rpx;
    align-self: flex-start;
    line-height: 33rpx;
  }
  .group_17 {
    margin-top: 38rpx;
  }
  .group_19 {
    margin-top: 46rpx;
  }
  .group_20 {
    margin-top: 44rpx;
  }
  .group_21 {
    margin-top: 44rpx;
  }
  .group_23 {
    margin-top: 39rpx;
    border-top: solid 1rpx #eeeeee;
  }
  .group_27 {
    padding: 28rpx 0 32rpx;
    border-bottom: solid 1rpx #eeeeee;
  }
  .group_28 {
    padding: 29rpx 0 34rpx;
  }
  .text_35 {
    color: #333333;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .image_13 {
    width: 75rpx;
    height: 30rpx;
  }
  .image {
    width: 33rpx;
    height: 20rpx;
  }
  .image_1 {
    margin-left: 8rpx;
    width: 28rpx;
    height: 20rpx;
  }
  .image_2 {
    margin-top: 2.5rpx;
    flex-shrink: 0;
    width: 14rpx;
    height: 24rpx;
  }
  .text_1 {
    margin-left: 13rpx;
    color: #ffffff;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .image_3 {
    margin-left: 4.5rpx;
    margin-top: 3rpx;
    flex-shrink: 0;
    width: 48rpx;
    height: 23rpx;
  }
  .image_4 {
    position: absolute;
    left: 8rpx;
    bottom: 0px;
    width: 19rpx;
    height: 36rpx;
  }
  .text_2 {
    color: #ffffff;
    font-size: 36rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 43rpx;
  }
  .group_6 {
    height: 50rpx;
  }
  .image_5 {
    margin-right: 36rpx;
    margin-top: 7.5rpx;
    filter: drop-shadow(0px 3rpx 3rpx #1a60e266);
    width: 80rpx;
    height: 76rpx;
  }
  .text_5 {
    margin-left: 18rpx;
    color: #333333;
    font-size: 32rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 38rpx;
  }
  .text_6 {
    color: #666666;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .text_7 {
    margin-right: 3rpx;
    color: #333333;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .text_8 {
    margin-bottom: 6rpx;
    color: #666666;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .text_9 {
    margin-top: 6rpx;
    color: #333333;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .text_10 {
    color: #666666;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .text_11 {
    color: #333333;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .text_12 {
    margin-left: 18rpx;
    color: #333333;
    font-size: 32rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 38rpx;
  }
  .text_14 {
    color: #666666;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .text_15 {
    color: #fe641a;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .group_15 {
    padding: 0 4rpx 32rpx;
    border-bottom: solid 1rpx #eeeeee;
  }
  .group_16 {
    margin-top: 22rpx;
  }
  .text_18 {
    margin-top: 15rpx;
    align-self: flex-start;
    color: #999999;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .text_20 {
    margin-top: 15rpx;
    align-self: flex-start;
    color: #999999;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .text_21 {
    margin-bottom: 3rpx;
    color: #333333;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .image_9 {
    margin-left: 21rpx;
    margin-top: 8rpx;
  }
  .text_22 {
    margin-bottom: 3rpx;
    color: #333333;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .image_10 {
    margin-left: 15rpx;
    margin-top: 8rpx;
  }
  .text_24 {
    margin-top: 15rpx;
    align-self: flex-start;
    color: #999999;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .group_24 {
    padding: 30rpx 0 35rpx;
    border-bottom: solid 1rpx #eeeeee;
  }
  .group_25 {
    padding: 27rpx 0 31rpx;
  }
  .view_3 {
    margin-top: 13rpx;
  }
  .image_12 {
    margin-left: 17rpx;
    width: 132rpx;
    height: 40rpx;
  }
  .text_32 {
    margin-right: 267rpx;
    align-self: flex-end;
    color: #1c4ca8;
    font-size: 24rpx;
	margin-top: -28rpx;
    font-family: '.AppleSystemUIFont';
  }
  .group_30 {
    margin-top: 9rpx;
  }
  .text_3 {
    color: #ffffff;
    font-size: 32rpx;
    font-family: '.AppleSystemUIFont';
  }
  .text_4 {
    margin-top: 16rpx;
    color: #ffffff;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
  }
  .text_16 {
    margin-left: 18rpx;
    color: #333333;
    font-size: 32rpx;
    font-family: '.AppleSystemUIFont';
  }
  .text_17 {
    margin-bottom: 3rpx;
    color: #333333;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
  }
  .image_7 {
    margin-left: 19rpx;
    margin-top: 8rpx;
  }
  .text_19 {
    margin-bottom: 3rpx;
    color: #333333;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .image_8 {
    margin-left: 19rpx;
    margin-top: 8rpx;
  }
  .text_23 {
    margin-bottom: 3rpx;
    color: #333333;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .image_11 {
    margin-left: 19rpx;
    margin-top: 8rpx;
  }
  .text_25 {
    margin-bottom: 6rpx;
    color: #999999;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .text_26 {
    margin-top: 6rpx;
    color: #333333;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .text_27 {
    margin: 7rpx 16rpx 3rpx 0;
    color: #999999;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .group_26 {
    height: 38rpx;
  }
  .text_30 {
    margin-bottom: 6rpx;
    color: #999999;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .text_31 {
    margin-left: 40rpx;
    margin-top: 6rpx;
    color: #333333;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .text_33 {
    margin-bottom: 6rpx;
    color: #999999;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .text_34 {
    margin-left: 40rpx;
    margin-top: 6rpx;
    color: #333333;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .text_28 {
    color: #fe641a;
    font-size: 20rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 23rpx;
  }
  .text_29 {
    color: #fe641a;
    font-size: 32rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 38rpx;
  }
</style>